<%@ page language="java" contentType="text/html; charset=UTF-8"
         pageEncoding="UTF-8" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%@ page import="java.util.Date" %>
<%@ page import="java.text.SimpleDateFormat" %>
<%
    request.setCharacterEncoding("UTF-8");
    String htmlData = request.getParameter("content1") != null ? request.getParameter("content1") : "";
%>
<%
    String path = request.getContextPath();
    String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort()
            + path + "/";
%>
<%
    SimpleDateFormat format = new SimpleDateFormat("yyyy-MM-dd");
    String date = format.format(new Date());
%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>Insert title here</title>
    <script type="text/javascript" src="<%=path%>/My97DatePicker/WdatePicker.js"></script>
    <link rel="stylesheet" type="text/css" href="<%=path%>/CSS/backLayout.css">
    <link rel="stylesheet" type="text/css" href="<%=path%>/CSS/bombBox.css">


</head>
<style>
    .seachform li span {
        color: #444444;
        padding-left: 60px;
    }

    li input {
        width: 80px;
    }

    select {
        width: 80px;
        height: 30px;
        line-height: 30px;
    }

    .seachform li {
        float: left;
    }

    .scinput {
        line-height: 10px;
        margin-top: 5px
    }

    .scinput1 {
        margin-top: 5px;
        height: 30px;
    }

    .scbtn {
        background: #57a0ff;
        border-radius: 20px;
        width: 110px;
        height: 35px;
        margin-left: 40px;
        font-size: 14px;
        font-weight: bold;
        color: #fff;
        cursor: pointer;
        outline: none;
        border: none;
    }

    thead {
        background: #f2f2f2
    }

    .template th {
        height: 45px;
        background: none;
    }

    .template tr {
        height: 45px;
    }

    .template tr th {
        height: 20px;
        border-left: 1px solid #dddee6;
        border-right: 1px solid #dddee6;
        color: #444444;
        text-align: center;
    }

    .tou {
        background: #e4eafe
    }

    .kh {
        border-bottom: 1px solid #dddee6;
    }

    .shuju td {
        border: 1px solid #dddee6;
        color: #787c88;
        text-align: center;
    }

    .shuju:nth-child(odd) {
        background: #ffffff
    }

    .shuju:nth-child(even) {
        background: #f3f5fb
    }

    .shuju:last-child {
        border-bottom: 1px solid #dddee6;
    }

    .shuju:HOVER {
        background: #fff6cd;
    }

    ul {
        border: none;
    }

    .shuju td:first-child {
        width: 120px;
    }

    tr {
        height: 28px;
    }
</style>
<body style="background: #f5f5f5">
<div class="main">
    <div class="weizhi">
        报表>>车辆费用明细表
    </div>
    <div class="div_body" style="height: 60px; min-height: 60px;margin-bottom: 0px; ">

        <form action="<%=path%>/DrivingSys/outXls" class="form" method="post">
            <ul class="seachform">
                <li>
                    <span class="scinput">类型&nbsp;:&nbsp;</span>
                    <select id="state">
                        <option value="0">明细</option>
                        <option value="1">汇总</option>
                    </select></li>
                <li><span class="scinput1">开始时间&nbsp;:&nbsp;</span>
                    <input name="beginTime" id="begindate" value="${beginTime}" style="color: gray;"
                           onclick="WdatePicker({el:'begindate',dateFmt:'yyyy-MM-dd'})"/>
                    <img onclick="WdatePicker({el:'begindate',dateFmt:'yyyy-MM-dd '})"
                         src="<%=path%>/image/date.jpg" align="absmiddle" style="padding-left: 15px"></li>
                <li><span class="scinput1">结束时间&nbsp;:&nbsp;</span>
                    <input name="endTime" id="enddate" value="${endTime}" style="color: gray;"
                           onclick="WdatePicker({el:'enddate',dateFmt:'yyyy-MM-dd'})"/>
                    <img onclick="WdatePicker({el:'enddate',dateFmt:'yyyy-MM-dd '})"
                         src="<%=path%>/image/date.jpg" align="absmiddle" style="padding-left: 15px"></li>

                <li>
                    <input id="xls" type="hidden" name="xls" value="">
                    <input type="hidden" name="fileNames" id="fileNames" value="车辆费用明细表">
                </li>
                <input class="scbtn" id="out_xls" value="导出EXCLE" type="submit">
                <li>
                    <input type="button" class="scbtn" id="selsect" value="立即查询"/>
                </li>
            </ul>
        </form>

    </div>
    <div id="temp"
         style="width: 100%; overflow: auto; margin-bottom: 20px; margin-top: 30px; background: #fff; box-shadow: 0 0 10px #f2f2f2; min-height: 600px">

    </div>
</div>


</body>
<script type="text/javascript" src="<%=path%>/JQuery/jquery-1.8.2.js"></script>
<script type="text/javascript" src="<%=path%>/HoganJS/handlebars-v4.0.11.js"></script>
<script id="table-template-carrefuke" type="text/x-handlebars-template">
    <div class="journaling">
        <table id="template" width="100%" align="center" style="min-height:30px;border-spacing:0;">
            <tr class="shuju">
                <td style="width: 20px;height: 25px; font-size: 18px;" colspan="12">车辆费用汇总表：</td>
            </tr>
            <tr class="shuju">
                <td colspan="4" style="text-align:left;width: 20px;height: 25px; font-size: 16px;">单位名称：{{gsName}}</td>
                <td style="" colspan="11">时间：<span id="beginTime"></span>至<span
                        id="endTime"></span></td>
            </tr>
            <tbody id="table1" style="border-spacing: 0px">
            <tr class="shuju">
                <td rowspan="2" style="background: rgb(228,234,254)">部门</td>
                <td rowspan="2" style="background: rgb(228,234,254)">车牌号</td>
                <td colspan="2" style="background: rgb(228,234,254)">燃油费(升&元)</td>
                <td colspan="2" style="background: rgb(228,234,254)">学员（人&升）</td>
                <td colspan="2" style="background: rgb(228,234,254)">保险费</td>
                <td rowspan="2" style="background: rgb(228,234,254)">车船税</td>
                <td rowspan="2" style="background: rgb(228,234,254)">年检</td>
                <td rowspan="2" style="background: rgb(228,234,254)">维修费</td>
                <td rowspan="2" style="background: rgb(228,234,254)">备注</td>
            </tr>
            <tr class="shuju">
                <td style="background: rgb(228,234,254)">数量</td>
                <td style="background: rgb(228,234,254)">金额</td>
                <td style="background: rgb(228,234,254)">人数</td>
                <td style="background: rgb(228,234,254)">平均油耗</td>
                <td style="background: rgb(228,234,254)">交强险</td>
                <td style="background: rgb(228,234,254)">商业险</td>
            </tr>
            </tbody>
            <tbody id="table2">
            {{#each carExpense}}
            <tr class="shuju">
                <td>{{depName}}</td>
                <td>{{carNumber}}</td>
                <td class="count1">{{count1}}</td>
                <td></td>
                <td class="count2">{{count2}}</td>
                <td class="sum">{{division count1 count2}}</td>
                <td class="jqInsurance">{{jqInsurance}}</td>
                <td class="syInsurance">{{syInsurance}}</td>
                <td></td>
                <td class="annualCheck">{{annualCheck}}</td>
                <td class="carShipTax">{{carShipTax}}</td>
                <td>{{remark}}</td>
            </tr>
            {{/each}}
            </tbody>
            <tbody id="table3">
            <tr class="shuju">
                <td style="background-color: rgb(204,204,204)">1</td>
                <td style="background-color: rgb(204,204,204)">总计</td>
                <td style="background-color: rgb(204,204,204)" id="count1"></td>
                <td style="background-color: rgb(204,204,204)">4</td>
                <td style="background-color: rgb(204,204,204)" id="count2"></td>
                <td style="background-color: rgb(204,204,204)" id="sum"></td>
                <td style="background-color: rgb(204,204,204)" id="jqInsurance"></td>
                <td style="background-color: rgb(204,204,204)" id="syInsurance"></td>
                <td style="background-color: rgb(204,204,204)">9</td>
                <td style="background-color: rgb(204,204,204)" id="annualCheck"></td>
                <td style="background-color: rgb(204,204,204)" id="carShipTax"></td>
                <td style="background-color: rgb(204,204,204)">12</td>
            </tr>
            </tbody>
        </table>
    </div>
</script>
<script id="table-template-carrefuke2" type="text/x-handlebars-template">
    <div class="journaling">
        <table id="template" width="100%" align="center" style="min-height:30px;border-spacing:0;">
            <tr class="shuju">
                <td style="width: 20px;height: 25px; font-size: 18px;" colspan="14">车辆费用明细表：</td>
            </tr>
            <tr class="shuju">
                <td colspan="4" style="text-align:left;width: 20px;height: 25px; font-size: 16px;">单位名称：{{gsName}}</td>
                <td style="" colspan="11">时间：<span id="beginTime"></span>至<span
                        id="endTime"></span></td>
            </tr>
            <tbody id="table1" style="border-spacing: 0px">
            <tr class="shuju">
                <td rowspan="2" style="background: rgb(228,234,254)">费用时间</td>
                <td rowspan="2" style="background: rgb(228,234,254)">部门</td>
                <td rowspan="2" style="background: rgb(228,234,254)">车牌号</td>
                <td colspan="3" style="background: rgb(228,234,254)">燃油费(升&元)</td>
                <td colspan="2" style="background: rgb(228,234,254)">学员（人&升）</td>
                <td colspan="2" style="background: rgb(228,234,254)">保险费</td>
                <td rowspan="2" style="background: rgb(228,234,254)">车船税</td>
                <td rowspan="2" style="background: rgb(228,234,254)">年检</td>
                <td rowspan="2" style="background: rgb(228,234,254)">维修费</td>
                <td rowspan="2" style="background: rgb(228,234,254)">备注</td>
            </tr>
            <tr class="shuju">
                <td style="background: rgb(228,234,254)">数量</td>
                <td style="background: rgb(228,234,254)">单价</td>
                <td style="background: rgb(228,234,254)">金额</td>
                <td style="background: rgb(228,234,254)">人数</td>
                <td style="background: rgb(228,234,254)">平均油耗</td>
                <td style="background: rgb(228,234,254)">交强险</td>
                <td style="background: rgb(228,234,254)">商业险</td>
            </tr>
            </tbody>
            <tbody id="table2">
            {{#each carExpense}}
            <tr class="shuju">
                <td>{{fbizDate}}</td>
                <td>{{depName}}</td>
                <td>{{carNumber}}</td>
                <td class="count1">{{count1}}</td>
                <td>0</td>
                <td></td>
                <td class="count2">{{count2}}</td>
                <td class="sum">{{division count1 count2}}</td>
                <td class="jqInsurance">{{jqInsurance}}</td>
                <td class="syInsurance">{{syInsurance}}</td>
                <td></td>
                <td class="annualCheck">{{annualCheck}}</td>
                <td class="carShipTax">{{carShipTax}}</td>
                <td>{{remark}}</td>
            </tr>
            {{/each}}
            </tbody>
            <tbody id="table3">
            <tr class="shuju">
                <td style="background-color: rgb(204,204,204)"></td>
                <td style="background-color: rgb(204,204,204)"></td>
                <td style="background-color: rgb(204,204,204)">总计</td>
                <td style="background-color: rgb(204,204,204)" id="count1"></td>
                <td style="background-color: rgb(204,204,204)"></td>
                <td style="background-color: rgb(204,204,204)"></td>
                <td style="background-color: rgb(204,204,204)" id="count2"></td>
                <td style="background-color: rgb(204,204,204)" id="sum"></td>
                <td style="background-color: rgb(204,204,204)" id="jqInsurance"></td>
                <td style="background-color: rgb(204,204,204)" id="syInsurance"></td>
                <td style="background-color: rgb(204,204,204)"></td>
                <td style="background-color: rgb(204,204,204)" id="annualCheck"></td>
                <td style="background-color: rgb(204,204,204)" id="carShipTax"></td>
                <td style="background-color: rgb(204,204,204)"></td>
            </tr>
            </tbody>
        </table>
    </div>
</script>
<script type="text/javascript">
    $(function () {
        $('#selsect').click()
    });
    //弹出框模版文件
    var myTemplate_carrefuke = Handlebars.compile($("#table-template-carrefuke").html());

    var myTemplate_carrefuke2 = Handlebars.compile($("#table-template-carrefuke2").html());
    //注册一个比较内容是否为空
    Handlebars.registerHelper("isNull", function (v1, options) {
        if (v1 != "") {
            //满足添加继续执行
            return options.fn(this);
        } else {
            //不满足条件执行{{else}}部分
            return options.inverse(this);
        }
    });

    //注册一个比较大小的Helper,判断v1是否大于v2
    Handlebars.registerHelper("compare", function (v1, v2, options) {
        if (v2 == 100) {
            //满足添加继续执行
            return options.fn(this);
        }
        if (v1 == v2) {
            //满足添加继续执行
            return options.fn(this);
        } else {
            //不满足条件执行{{else}}部分
            return options.inverse(this);
        }
    });

    Handlebars.registerHelper("division", function (num1, num2) {
        if (num1 == 0 || num2 == 0) {
            return 0;
        }
        return (num1 / num2).toFixed(2);
    });


    $('#selsect').click(function () {
        cfoilspecName = $('#cfoilspecName').val()
        begindate = $('#begindate').val()
        enddate = $('#enddate').val()
        $('#temp').html("<div class='loading'></div>");

        $.ajax({
            url: '<%=path%>/DrivingSys/selCarExpenseDetailJournal',
            type: "post",
            data: {
                'cfoilspecName': cfoilspecName,
                'begindate': begindate,
                'enddate': enddate,
                'state': $('#state').val()
            },
            dataType: "json",
            success: function (res) {
                //如果是查询总报表 fbizDate字段为空
                if ($('#state').val() == 1) {
                    $('#temp').html(myTemplate_carrefuke(res));
                    $('#fileNames').val('车辆费用汇总表')
                } else {
                    $('#temp').html(myTemplate_carrefuke2(res));
                }

                var count1 = 0, count2 = 0, sum = 0, jqInsurance = 0, syInsurance = 0, annualCheck = 0, carShipTax = 0;
                $('.count1').each(function (i) {
                    count1 += $(this).html() * 1
                })
                $('.count2').each(function (i) {
                    count2 += $(this).html() * 1
                })
                $('.sum').each(function (i) {
                    sum += $(this).html() * 1
                })
                $('.jqInsurance').each(function (i) {
                    jqInsurance += $(this).html() * 1
                })
                $('.syInsurance').each(function (i) {
                    syInsurance += $(this).html() * 1
                })
                $('.annualCheck').each(function (i) {
                    annualCheck += $(this).html() * 1
                })
                $('.carShipTax').each(function (i) {
                    carShipTax += $(this).html() * 1
                })
                $('#count1').html(count1.toFixed(2));
                $('#count2').html(count2.toFixed(2));
                $('#sum').html(sum.toFixed(2));
                $('#jqInsurance').html(jqInsurance.toFixed(2));
                $('#syInsurance').html(syInsurance.toFixed(2));
                $('#annualCheck').html(annualCheck.toFixed(2));
                $('#carShipTax').html(carShipTax.toFixed(2));
                enddate
                $('#beginTime').html($('#begindate').val())
                $('#endTime').html($('#enddate').val())
                $('#xls').val($('#temp').html())
            },
            error: function () {
            }
        });

    })

</script>
<%@ include file="/WEB-INF/JSP/ajax.jsp" %>
</html>